<!--
 * @Author: ChunLai
 * @Date: 2023-07-26 10:10:50
 * @LastEditTime: 2025-08-06 11:14:57
 * @Description: 险种计划展示模块
 * @FilePath: \02.bldinsure\src\components\RiskPlanModule.vue
-->
<template>
  <div class="risk_plan_mode">
    <div class="flex-lr mode1">
      <span class="mode1_l">产品信息</span>
      <span class="mode1_r">
        首年总保费：<b>{{ totalFee }}</b> 元
      </span>
    </div>
    <div class="mt10">
      <RiskTable></RiskTable>
      <div class="mt10 mode_renew" v-if="getRenewList.length > 0">
        <div class="renew_name">在保证续保期间内申请续保</div>
        <div
          class="renew_list"
          v-for="(item, index) in getRenewList"
          :key="`xubao${index}`"
        >
          {{ item.productName }}
        </div>
      </div>
    </div>
    <div class="cash_box" v-if="showCashTable && cashShow">
      <CashTableBtn />
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import CashTableBtn from "./cash/CashTableBtn";
import { getOrderDetail } from "@/utils/functions.js";
import { GetRiskData } from "@/translate/risks/insert.js";
export default {
  name: "RiskPlanModule",
  props: {
    cashShow: {
      type: Boolean,
      default: () => false,
    },
  },
  data() {
    return {};
  },
  components: { CashTableBtn },
  computed: {
    ...mapGetters({
      totalFee: "insert/totalPrem",
      recall: "insert/recall",
      riskInfo: "risks/showedRisks",
      showCashTable: "page/showCashTable",
    }),
    getRenewList() {
      let res = [];
      if (this.riskInfo.length > 0) {
        res = this.riskInfo.filter(
          (ele) => ele.renewFlag != void 0 && ele.renewFlag == "-1"
        );
      }
      return res;
    },
  },
  watch: {},
  created() {},
  mounted() {
    // 页面刷新/人脸识别回跳/跳转签名回跳,get2VarietyInfo接口会初始化险种信息
    try {
      if (this.recall == "1") {
        this.reBackRiskApiInfos();
      }
    } catch (error) {
      console.log(error);
    }
  },
  methods: {
    reBackRiskApiInfos() {
      this.$store.commit("insert/SET_RECALL", "0");
      getOrderDetail(this.apiComParams).then(({ data }) => {
        let { cont, insureds } = data;
        if (cont && cont.totalPrem) {
          this.$store.commit("insert/UPDATE_PAYINFO", {
            totalPrem: cont.totalPrem,
          });
        }
        if (insureds && insureds[0]) {
          let risks = insureds[0].risks || [];
          if (risks.length > 0) {
            if (this.compEngName === "ansheng") {
              // 安盛产品继续投保回显(2021-12-10)
              this.$store.dispatch("risks/backRiskSetAnSheng", risks);
            } else {
              let risk = GetRiskData(risks);
              this.$store.commit("risks/SET_RISKS_DATA", risk);
            }
          }
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.risk_plan_mode {
  padding: 0 12px 10px;
  background-color: #fff;

  .mode1 {
    padding-top: 12px;
    padding-bottom: 6px;

    .mode1_l {
      font-size: 16px;
      font-weight: 600;
      color: #242424;
      line-height: 22px;
      font-family: MiSans;
    }

    .mode1_r {
      font-size: 12px;
      color: #747474;
      line-height: 22px;

      b {
        font-size: 17px;
        font-weight: 600;
        color: #d44438;
      }
    }
  }

  .mode_renew {
    padding-left: 9px;

    .renew_name {
      color: #343434;
      font-size: 15px;
      font-weight: 600;
    }

    .renew_list {
      font-size: 14px;
      font-weight: 400;
      line-height: 1.5;
      color: rgba(116, 116, 116, 1);
      margin-top: 6px;
    }
  }
}
.cash_box {
  display: flex;
  justify-content: flex-end;
}
</style>
